<template>
	<view class="user">
		<button v-if="!(res || user_name)" type="default" @click="goto">登录</button>
		<view class="userTab" v-if="user_name">
			<image style="width: 50px; height: 50px; border-radius: 50%;" :src="user_image"></image>
			<view class="left">
				<view class="name">{{user_name}}</view>
				<view class="love">收藏数量{{count}}</view>
			</view>
		</view>
		<view class="loveBox"  v-if="user_name">
			<SearchCard v-for="(item,index) in fav" :key="index" :item="item">
			</SearchCard>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import SearchCard from '@/components/SearchCard/SearchCard.vue'
	export default {
		components: {
		    SearchCard,
		},
		data() {
			return {
				code:null,
				user_image:null,
				user_name:null,
				// res:null,
				count:0,
				fav: null,
				openid: null,
			};
		},
		computed: {
		    ...mapState(['favorite']),
			res: function(){
				return uni.getStorageSync('user') || null;
			}
		},
		onShow() {
			//显示收藏总数
			//连接云数据库
			if(this.res){
				uniCloud.database().collection('dg_favourite').get().then(res =>{
					this.count = res.result.data.length;
					this.fav = res.result.data.map(item => item.data);
					this.fav = this.fav.reverse();
					this.user_name = this.res.userInfo.nickName;
					this.user_image = this.res.userInfo.avatarUrl;
					// console.log(this.fav)
				});
			}
		},

		methods:{
			goto: function(){
					uni.login({
						provider: 'weixin',
						onlyAuthorize: true,
						success: (res) => {
							this.code = res.code;
							getApp().globalData.code = res.code;
							
							// let appid = 'wx9973d149e4c9a917'
							// let secret = '7d1d1f5813ea2efd8d9741156914822c'
							// let url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' +res.code ;
							// // console.log(url);
							// uni.request({
							// 	url: url, // 请求路径
							// 	success: result => {
							// 		this.openid = result.data.openid;
							// 		this.session_key = result.data.session_key;
							// 		console.log(result.data.openid);
							// 		uni.setStorageSync('openid', result.data.openid);
							// 		console.log(result.data.session_key);
							// 	},
							// 	fail(res) {
							// 		console.log(res);
							// 	}
							// });
						},
						
						fail:(res) => {
							console.log(res)
						}
					});
					
					uni.getUserProfile({
						desc: '获取你的昵称、头像、地区及性别',
						success: res => {
							console.log(res);
							// console.log(1);
							uni.setStorageSync('user', res);
							// getApp().globalData.res = res;
							console.log('用户昵称为：' + res.userInfo.nickName);
							console.log('用户性别为：' + res.userInfo.gender);
							this.user_name = res.userInfo.nickName;
							this.user_image = res.userInfo.avatarUrl;
							console.log('用户头像：' + res.userInfo.avatarUrl);
							
							//显示收藏总数
							//连接云数据库
							uniCloud.database().collection('dg_favourite').get().then(res =>{
								this.count = res.result.data.length;
								this.fav = res.result.data.map(item => item.data);
								this.fav = this.fav.reverse();
								console.log(this.fav)
							});

						},
						fail: res => {
							console.log(res)
							return;
						}
					});
						
				}
			}
	}
</script>

<style lang="less">
	.user{
		padding: 10px;
		.userTab{
			display: flex;
			align-items: center;
			padding-bottom: 10px;
			border-bottom: 1px solid #b8b8b8;
			.left{
				margin-left: 10px;
				font-size: 14px;
			}
		}
	}
</style>
